<template>
  <div class="tabBar">
    <router-link class="tab-item" v-for="(item,index) in data" :key="index" :to="item.path" active-class="is-selected">
      <div :class="item.icon" class="home-icon"></div>
      <div>{{item.title}}</div>
    </router-link>
  </div>
</template>
<script>
export default {
  name: 'TabBar',
  props: {
    data: Array
  },
  methods: {
  
  }
}
</script>
<style  scoped>
.tabBar {
  z-index: 99999;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 1.325rem;
  /* background-image: linear-gradient(
    180deg,
    #d9d9d9,
    #d9d9d9 50%,
    transparent 0
  ); */
  background-color: #fff;
  background-size: 100% 0.0625rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.tab-item {
  color: rgb(90, 87, 87);
  flex: 1;
  font-size: 0.375rem;
  text-decoration: none;
}

.home-icon {
  font-size: 0.575rem;
}
.is-selected {
  color: #009eef;
}
</style>
